<template>
  <div class='style1'>
    <p class='p1'>111</p>
    <h1>测试弹窗组件{{ a }}</h1>
    <ui-button @click="openDialog">点击弹窗</ui-button>
    <ui-dialog :visible.sync="isShow" @open="onSpecialDialogOpen" >弹窗成功</ui-dialog>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      isShow: false,
      a: '',
    };
  },
  mounted() {
    this.a = this.$route.query.a;
  },
  methods: {
    openDialog() {
      this.isShow = true;
    },
    onSpecialDialogOpen() {
      // 找到遮罩元素并修改样式
      const mask = document.querySelector('.v-modal');
      const mask1 = document.querySelector('.p1');
      //mask1.style.backgroundColor = 'white';
      mask1.style.backgroundColor = 'lightblue'; // 设置背景颜色为浅蓝色
      console.log('mask',mask);
      console.log('mask1',mask1);
      
      
      if (mask) {
        mask.style.backgroundColor = 'white'; // 或者你想要的任何颜色
      } 
      // else {
        // 如果找不到，可能是因为遮罩还没有被添加到DOM中
        // 你可以使用setTimeout来稍微延迟执行，或者监听DOM变化
      //   this.$nextTick(() => {
      //     const mask = document.querySelector('.el-dialog__wrapper .el-dialog__mask.special-dialog-mask');
      //     if (mask) {
      //       mask.style.backgroundColor = 'white';
      //     }
      //   });
      // }
    },
    // onDialogOpen() {
    //   document.body.classList.add('no-scroll');
    // },
    // onDialogClose() {
    //   document.body.classList.remove('no-scroll');
    // },
  },
};
</script>

<style >
.style1 {
  height: 2000px;
}
.no-scroll {
    overflow: hidden;
}
.v-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    background: rgba(0, 0, 0, 0)
}
</style>